<template>
  <div class="login-wrap">
    <div class="ms-login">
      <div class="ms-title">饿了么后台管理系统</div>
      <el-form ref="loginForm" v-loading="listLoading" :model="loginForm" :rules="rules" label-width="0px" class="ms-content">
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" placeholder="账号" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" type="password" placeholder="密码" @keyup.enter.native="handleLogin" />
        </el-form-item>
        <div class="login-btn">
          <el-button class="buttonStyle" type="primary" @click="handleLogin">登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import { login } from '@/api/login/loginInfo'
import qs from 'qs'
export default {
  name: 'Login',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (value.length < 1) {
        callback(new Error('请输入账号!'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 1) {
        callback(new Error('请输入密码!'))
      } else {
        callback()
      }
    }
    return {
      listLoading: false,
      loginForm: {
        username: '',
        password: ''
      },
      user: {
        name: '',
        username: '',
        id: undefined,
        type: undefined
      },
      userToken: '',
      rules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    handleLogin() {
      // this.listLoading = true
      this.$refs['loginForm'].validate((valid) => {
        if (valid) {
          this.listLoading = true
          login(qs.stringify(this.loginForm)).then(res => {
            if (res.loginRes !== null && res.loginRes.length !== 0) {
              this.userToken = res.Token
              this.user = res.loginRes[0]
              if (this.user.type != null) {
                // 将用户token保存到vuex中
                sessionStorage.setItem('Authorization', this.userToken)
                sessionStorage.setItem('user', JSON.stringify(this.user))
                if (this.user.type === 0) {
                  sessionStorage.setItem('role', 'admin')
                } else if (this.user.type === 1) {
                  sessionStorage.setItem('role', 'seller')
                  sessionStorage.setItem('seller_id', this.user.id)
                } else if (this.user.type === 2) {
                  // 此账号为普通用户时
                  this.reset()
                }
                this.listLoading = false
                this.$router.push({ path: this.redirect || '/' })
              } else {
                // 没有type字段时
                this.reset()
              }
            } else {
              // 用户名密码不存在时
              this.reset()
            }
            this.listLoading = false
          })
        } else {
          this.listLoading = false
          return false
        }
      })
    },
    reset() {
      this.$message.warning('无权限！请重新登录！')
      sessionStorage.clear()
      this.loginForm.username = ''
      this.loginForm.password = ''
    }
  }
}
</script>
<style lang="scss" scoped>
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg:#283443;
$light_gray:#fff;
$cursor: #fff;
/* reset element-ui css */

  .box-card-header {
    // position: relative;

    position: absolute;
    left:70%;
    top:60%;
    margin:-230px 0 0 -220px;

    height: 100px;
    width: 120px;
    img {
      width: 100%;
      height: 100%;
      transition: all 0.2s linear;
      &:hover {
        transform: scale(1.1, 1.1);
        filter: contrast(130%);
      }
    }
  }
</style>

<style scoped>
    .image{
      width:100%;
      height:100%;
    }
    .logo1{
				float: left;
        margin-left: 10%;
				width: 60;
				height: 60px;
				/* border: 1px solid red; */
        margin-top:10px;
			}

      .logo{
				float: left;
				width: 33%;
				height: 60px;
				line-height: 60px;
			}
    .login-wrap{
        position: absolute;
        width:100%;
        height:100%;
        background-image: url(../../assets/img/login.png);
        background-repeat: no-repeat;
        background-size:cover;
        /* background-repeat:no-repeat;
        background-size: 100% 100%; */
    }
    /* .buttonStyle{
      color: #00479d;
    } */

    .ms-title{
        width:100%;
        line-height: 50px;
        text-align: center;
        color: #2d3a4b;
        border-bottom: 1px solid #ddd;
        font-size: 26px;
        padding:20px;
         /* margin-bottom:20px; */
        /* font-family: '仿宋'; */
        /* margin: 0px auto 40px auto;
        text-align: center;
        font-weight: bold; */
    }
    .ms-login{
        position: absolute;
        left:70%;
        top:55%;
        width:312px;
        margin:-190px 0 0 -175px;
        border-radius: 10px;
        background-color: #fff;
        /* background: rgba(187, 179, 179, 0.3); */
        overflow: hidden;
    }
    .ms-content{
        padding: 30px 30px;
    }
    .login-btn{
        text-align: center;
    }
    .login-btn button{
        width:100%;
        height:36px;
        margin-bottom: 10px;
    }
    .login-tips{
        font-size:12px;
        line-height:30px;
        color:#fff;
    }
      /* body{
    min-width: 1366px;
    max-width: 1920px;
    position: relative;
  } */
</style>
